<template>
    <div style="min-width:829px">
    <div v-if="$route.path == '/projectAdmin/classifyList'">
        <div class="vs-search-box">
            <el-form ref="form" :inline="true" :model="paging" label-width="110px">
                <el-form-item label="项目分类名称">
                    <el-input style="width:200px" v-model="paging.name"></el-input>
                </el-form-item>
                <!-- <el-form-item label="服务项目名称">
                    <el-input style="width:200px" v-model="paging.username"></el-input>
                </el-form-item> -->
                <el-form-item label="" class="vs-right-btns">
                    <el-button @click="reset">重置</el-button>
                    <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="vs-table-box">
            <div class="operation-box clear-float">
                <el-button @click="setRow(1)" style="margin-left:auto;" type="primary">新增</el-button>
                <!-- <el-button >导出</el-button> -->
            </div>
            <el-table v-loading="loading" :data="tableData" header-row-class-name="has-gutter-table" style="width: 100%">
                <el-table-column label="序号" type="index" width="120"></el-table-column>
                <el-table-column prop="name" label="项目分类名称"> </el-table-column>
                <!-- <el-table-column prop="t2" label="服务项目名称" > </el-table-column> -->
                <!-- <el-table-column prop="t2" label="项目时长" > </el-table-column> -->
                <el-table-column fixed="right" width="109" label="操作"> 
                    <template slot-scope="scope">
                        <span @click="setRow(2,scope.row)" class="tab-table-text">编辑</span>
                        <span @click="setRow(3,scope.row,scope.$index)" class="tab-red-text">删除</span>
                    </template>
                </el-table-column>
            </el-table>
            <!-- <div class="vs-paging-box">
                <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="paging.page"
                    :page-size="paging.limit"
                    layout="prev, pager, next, jumper"
                    :total="paging.total">
                </el-pagination>
            </div> -->
        </div>
    </div>
     <router-view></router-view>
    </div>
</template>

<script>
export default {
    data() {
        return {
             options: [
                {
                    value: '正大店',
                    label: '正大店'
                }
            ],
            recordList:[],
            loading:false,
            paging:{
                page: 1,
                total: 0,
                limit: 10,
                name:'',//姓名
            },
            tableData: []
        };
    },
    created() {
       this.GetList()
    },
    methods: {
         handleCurrentChange(val) {
            this.paging.page = val;
            this.GetList()
        },
        async setRow(type,row,index){
            if(type==1){
                this.utils.goUrl(`/projectAdmin/classifyList/editcassify?title=新增分类`)
            }else if(type == 2){
                this.utils.goUrl(`/projectAdmin/classifyList/editcassify?title=编辑分类&id=${row.id}`)
            }else{
                this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(async()  => {
                    let { code } = await this.$Http.delCate({id:row.id});
                     if(code){
                        console.log(1)
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.tableData.splice(index,1)
                     }
                 }).catch(() => {
                      console.log(2)
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
            }
        },
       async GetList() {
            this.loading = true;
            let { code, data } = await this.$Http.getCate(this.paging);
            this.loading = false;
            if (code) {
                this.tableData = data;
                this.paging.total = data.total;
            }
        },
        reset(){//重置
            this.paging = this.$options.data().paging
            this.GetList()
        },
    },
};
</script>

<style lang="scss" scoped>

.image-thumbnail{
    width: 130px;
    height: 130px;
}
</style>